<template>
  <div>
    <div class="topCom">
      <a-space class="itemsel">
        <span class="labels">行政区：</span>
        <a-select
          ref="select"
          v-model:value="provinceVal"
          placeholder="请选择"
          allowClear
          style="width: 120px"
          :options="provinceValList"
          @change="selProvinceVal"
        >
        </a-select>
      </a-space>
      <a-space class="itemsel">
        <span class="labels">是否完成核查：</span>
        <a-select
          ref="select"
          v-model:value="cityVal"
          placeholder="请选择"
          allowClear
          style="width: 120px"
          :options="cityList"
          @change="selCity"
        >
        </a-select>
      </a-space>
      <a-space class="itemsel">
        <span class="labels">批次号：</span>
        <a-input
          v-model:value="batchNumber"
          placeholder="请输入批次号"
          allowClear
        />
      </a-space>
      <a-space class="itemsel">
        <span class="labels">是否提交监理:</span>
        <a-select
          ref="select"
          v-model:value="cityVal"
          placeholder="请选择"
          allowClear
          style="width: 120px"
          :options="cityList"
          @change="selCity"
        >
        </a-select>
      </a-space>
      <a-space class="selBtn">
        <a-button type="primary" @click="selFun">查询</a-button>
      </a-space>
      <a-space class="resetBtn">
        <a-button type="dashed" @click="resetFun">重置</a-button>
      </a-space>
    </div>
    <div class="bomTable">
      <div class="tables">
        <a-table
          :row-selection="rowSelection"
          :columns="columns"
          :data-source="tabsList"
          :scroll="{ x: 1300, y: 500 }"
          :pagination="false"
        >
          <template #bodyCell="{ column, text }">
            <template v-if="column.dataIndex === 'name'">
              <a>{{ text }}</a>
            </template>
            <template v-if="column.key === 'operation'">
              <a @click="showDetail">详情</a>
            </template>
          </template>
        </a-table>
      </div>
      <div class="pagination-box">
        <a-pagination
          v-model:current="pageNumber"
          showSizeChanger
          showQuickJumper
          :total="total"
          bordered
          v-model:pageSize="pageSize"
          @change="onChange"
        />
      </div>
    </div>
    <!--详情一级-><!-->
    <a-modal
      v-model:open="open"
      title="1111核查图斑"
      @ok="handleOk"
      width="1200px"
    >
      <div>
        <div class="topCom">
          <a-space class="itemsel" style="margin-bottom: 12px">
            <span class="labels">采集表类型：</span>
            <a-select
              ref="select"
              v-model:value="collectionTableType"
              placeholder="请选择"
              allowClear
              style="width: 120px"
              :options="collectionTableTypeList"
              @change="selCollectionTableTypeList"
            >
            </a-select>
          </a-space>
          <a-space style="margin-left: 12px">
            <span class="labels">是否涉及农村乱占耕地建房问题：</span>
            <a-select
              ref="select"
              v-model:value="ruralillegaloccupation"
              placeholder="请选择"
              allowClear
              style="width: 120px"
              :options="ruralillegaloccupationList"
              @change="selCity"
            >
            </a-select>
          </a-space>
          <a-space style="margin-left: 12px">
            <span class="labels">是否分发：</span>
            <a-select
              ref="select"
              v-model:value="distribute"
              placeholder="请选择"
              allowClear
              style="width: 120px"
              :options="distributeList"
              @change="seldistribute"
            >
            </a-select>
          </a-space>
          <a-space style="margin-left: 12px">
            <span class="labels">是否提交：</span>
            <a-select
              ref="select"
              v-model:value="submit"
              placeholder="请选择"
              allowClear
              style="width: 120px"
              :options="submitList"
              @change="selsubmit"
            >
            </a-select>
          </a-space>
          <a-space class="itemsel">
            <span class="labels">是否核查：</span>
            <a-select
              ref="select"
              v-model:value="isCheckD1"
              placeholder="请选择"
              allowClear
              style="width: 120px"
              :options="isCheckD1List"
              @change="selisCheckD1"
            >
            </a-select>
          </a-space>
          <a-space class="itemsel" style="margin-left: 12px">
            <span class="labels">作业员：</span>
            <a-select
              ref="select"
              v-model:value="workpeo"
              placeholder="请选择"
              allowClear
              style="width: 120px"
              :options="workpeoList"
              @change="selworkpeo"
            >
            </a-select>
          </a-space>
          <a-space class="itemsel" style="margin-left: 12px">
            <span class="labels">编号：</span>
            <a-input
              v-model:value="nums"
              placeholder="请输入批次号"
              allowClear
            />
          </a-space>
          <a-space class="selBtn" style="margin-left: 12px">
            <a-button type="primary" @click="selxqFun">查询</a-button>
          </a-space>
          <a-space class="resetBtn" style="margin-left: 12px">
            <a-button type="dashed" @click="resetxqFun">重置</a-button>
          </a-space>
        </div>
        <div class="bomTable">
          <div class="tables">
            <a-table
              :row-selection="rowSelection"
              :columns="columnsDel"
              :data-source="tabsListD1"
              :scroll="{ x: 1300, y: 500 }"
              :pagination="false"
            >
              <template #bodyCell="{ column, text }">
                <template v-if="column.dataIndex === 'name'">
                  <a>{{ text }}</a>
                </template>
                <template v-if="column.key === 'operation'">
                  <a @click="showDetaildel">详情</a>
                </template>
              </template>
            </a-table>
          </div>
          <div class="pagination-box">
            <a-pagination
              v-model:current="pageNumber"
              showSizeChanger
              showQuickJumper
              :total="total"
              bordered
              v-model:pageSize="pageSize"
              @change="onChange"
            />
          </div>
        </div>
      </div>
    </a-modal>
    <!--详情二级-><!-->
    <a-modal
      v-model:open="opendel2"
      title="110121核查图斑"
      @ok="handledelOkdel"
      width="1200px"
    >
      <div class="btnwps">
        <a-space wrap>
          <a-button type="primary">上一个</a-button>
          <a-button>下一个</a-button>
        </a-space>
      </div>
      <div class="imgswp">
        <div class="leftImg">
          <h1>矢量截图</h1>
          <div>
            <a-carousel arrows>
              <template #prevArrow>
                <div class="custom-slick-arrow" style="left: 10px; z-index: 1">
                  <left-circle-outlined />
                </div>
              </template>
              <template #nextArrow>
                <div class="custom-slick-arrow" style="right: 10px">
                  <right-circle-outlined />
                </div>
              </template>
              <div>
                <img src="@/assets/true.jpeg" class="lbimgs" />
              </div>
              <div>
                <img src="@/assets/textIcon.png" class="lbimgs" />
              </div>
            </a-carousel>
          </div>
          <h1>举证照片</h1>
          <div class="jzphoto">
            <SwiperCom :data="dataSwiper"></SwiperCom>
          </div>
          <h1>附件</h1>
          <div class="tables">
            <a-table
              :columns="columnsFile"
              :data-source="tabsListFile"
              :scroll="{ x: 1300, y: 500 }"
              :pagination="false"
            >
              <template #bodyCell="{ column, text }">
                <template v-if="column.dataIndex === 'name'">
                  <a>{{ text }}</a>
                </template>
                <template v-if="column.key === 'operation'">
                  <a @click="showDetail">下载</a>
                </template>
              </template>
            </a-table>
          </div>
        </div>
        <div class="rightImg">
          <h1>核查图斑信息</h1>
          <h2>基本信息</h2>
          <div class="itemWP">
            <span>编号：</span>
            <a-space>
              <a-input
                v-model:value="detaileObj.bianhao"
                placeholder="请输入"
                disabled
              />
            </a-space>
          </div>
          <div class="itemWP">
            <span>数据编号：</span>
            <a-space>
              <a-input
                v-model:value="detaileObj.shujubianhao"
                placeholder="请输入"
                disabled
              />
            </a-space>
          </div>
          <div class="itemWP">
            <span>历史数据编号：</span>
            <a-space>
              <a-input
                v-model:value="detaileObj.lishishujubianhao"
                placeholder="请输入"
                disabled
              />
            </a-space>
          </div>
          <div class="itemWP">
            <span>核查图斑分类：</span>
            <a-space>
              <a-select
                size="large"
                disabled
                ref="select"
                v-model:value="detaileObj.cjlx"
                style="width: 180px"
              ></a-select>
            </a-space>
          </div>
          <div class="itemWP ncItemWp">
            <span>是否涉及农村 乱占耕地建房问题</span>
            <a-radio-group
              v-model:value="detaileObj.shifoushejinongcunluanzhan"
              style="width: 180px"
            >
              <a-radio :value="1">是</a-radio>
              <a-radio :value="2">否</a-radio>
            </a-radio-group>
          </div>
          <div class="itemWP">
            <span>不涉及原因：</span>
            <a-space>
              <a-select
                disabled
                ref="select"
                v-model:value="detaileObj.cjlx"
                style="width: 180px"
              ></a-select>
            </a-space>
          </div>
          <div class="itemWP">
            <span>采集类型：</span>
            <a-space>
              <a-select
                disabled
                ref="select"
                v-model:value="detaileObj.cjlx"
                style="width: 180px"
              ></a-select>
            </a-space>
          </div>
          <div class="itemWP">
            <span>历史采集类型：</span>
            <a-space>
              <a-input
                v-model:value="detaileObj.lishishujubianhao"
                placeholder="请输入"
                disabled
              />
            </a-space>
          </div>
          <div class="itemWP">
            <span>个人名称/项目名称：</span>
            <a-space>
              <a-input
                v-model:value="detaileObj.lishishujubianhao"
                placeholder="请输入"
                disabled
              />
            </a-space>
          </div>
          <div class="itemWP">
            <span>房屋主要用途：</span>
            <a-space>
              <a-input
                v-model:value="detaileObj.lishishujubianhao"
                placeholder="请输入"
                disabled
              />
            </a-space>
          </div>
          <div class="itemWP">
            <span>房屋类型：</span>
            <a-space>
              <a-input
                v-model:value="detaileObj.lishishujubianhao"
                placeholder="请输入"
                disabled
              />
            </a-space>
          </div>
          <div class="itemWP">
            <span>建设主体单位名称：</span>
            <a-space>
              <a-input
                v-model:value="detaileObj.lishishujubianhao"
                placeholder="请输入"
                disabled
              />
            </a-space>
          </div>
          <div class="itemWP">
            <span>建设主体单位名称：</span>
            <a-space>
              <a-input
                v-model:value="detaileObj.lishishujubianhao"
                placeholder="请输入"
                disabled
              />
            </a-space>
          </div>
          <div class="itemWP">
            <span>情况说明：</span>
            <a-space>
              <a-input
                v-model:value="detaileObj.lishishujubianhao"
                placeholder="请输入"
                disabled
              />
            </a-space>
          </div>
          <h2>核查意见</h2>
          <div class="itemWP">
            <span>核查结果</span>
            <a-radio-group
              v-model:value="detaileObj.shifoushejinongcunluanzhan"
            >
              <a-radio :value="1">未发现问题</a-radio>
              <a-radio :value="2">疑似问题</a-radio>
            </a-radio-group>
          </div>
          <div class="itemWP">
            <span>照片/影像地类：</span>
            <a-space>
              <a-select
                disabled
                ref="select"
                v-model:value="detaileObj.cjlx"
                style="width: 180px"
              ></a-select>
            </a-space>
          </div>
          <div class="itemWP">
            <span>核查结果说明：</span>
            <a-space>
              <a-select
                disabled
                ref="select"
                v-model:value="detaileObj.cjlx"
                style="width: 180px"
              ></a-select>
            </a-space>
          </div>
          <div class="itemWP">
            <span>监理评分：</span>
            <a-space>
              <a-select
                disabled
                ref="select"
                v-model:value="detaileObj.cjlx"
                style="width: 180px"
              ></a-select>
            </a-space>
          </div>
          <div class="itemWP">
            <span>核查备注：</span>
            <a-space>
              <a-select
                disabled
                ref="select"
                v-model:value="detaileObj.cjlx"
                style="width: 180px"
              ></a-select>
            </a-space>
          </div>
          <div class="itemWP">
            <span>监理员：</span>
            <a-space>
              <a-input
                v-model:value="detaileObj.lishishujubianhao"
                placeholder="请输入"
                disabled
              />
            </a-space>
          </div>
          <div class="itemWP">
            <span>核查时间：</span>
            <a-space>
              <a-input
                v-model:value="detaileObj.lishishujubianhao"
                placeholder="请输入"
                disabled
              />
            </a-space>
          </div>
        </div>
      </div>
    </a-modal>
  </div>
</template>
<script lang="ts" setup>
import { reactive, watch, h, ref, onMounted } from 'vue';
import type { SelectProps, TableProps, TableColumnType } from 'ant-design-vue';
import {
  LaptopOutlined,
  NotificationOutlined,
  CalendarOutlined,
  AppstoreOutlined,
  SettingOutlined,
  UploadOutlined,
  UserOutlined,
} from '@ant-design/icons-vue';
import * as Icons from '@ant-design/icons-vue';
import tabsLists from '@/mock/workTabledata.json'; //表格
import provinceValLists from '@/mock/provinceValList.json'; //省
import cityLists from '@/mock/cityList.json'; //市
import areaValLists from '@/mock/areaValList.json'; //区
import ischeckLists from '@/mock/ischeckList.json'; //是否完成核查
import workDetale1s from '@/mock/workDetale1.json'; //详情1级
import { LeftCircleOutlined, RightCircleOutlined } from '@ant-design/icons-vue'; //详情二级轮播图
import SwiperCom from '@/components/Swiper.vue';

//下拉菜单 省
const provinceVal = ref(undefined);
const provinceValList = ref<SelectProps['options']>([]);
provinceValList.value = provinceValLists.data;
const selProvinceVal = (value: string) => {
  // console.log(`selected ${value}`);
};
//下拉菜单 市
const cityVal = ref(undefined);

const selCity = (value: string) => {
  // console.log(`selected ${value}`);
};
const cityList = ref<SelectProps['options']>([]);
cityList.value = cityLists.data;
//下拉菜单 区
const areaVal = ref(undefined);

const selareaVal = (value: string) => {
  // console.log(`selected ${value}`);
};
const areaValList = ref<SelectProps['options']>([]);
areaValList.value = areaValLists.data;
//下拉菜单 是否完成核查
const ischeck = ref(undefined);

const selischeck = (value: string) => {
  // console.log(`selected ${value}`);
};
const ischeckList = ref<SelectProps['options']>([]);
ischeckList.value = ischeckLists.data;
//批次号
const batchNumber = ref('');
//查询
function selFun() {
  // console.log('provinceVal',provinceVal.value);
  // console.log('cityVal',cityVal.value);
  // console.log('areaVal',areaVal.value);
  // console.log('ischeck',ischeck.value);
  // console.log('batchNumber',batchNumber.value);
}
//重置
function resetFun() {
  provinceVal.value = undefined;
  cityVal.value = undefined;
  areaVal.value = undefined;
  ischeck.value = undefined;
  batchNumber.value = '';
}
//表格
interface DataType {
  key: string;
  province: string;
  city: string;
  district: string;
  countylevecode: string;
  checkfreckleSum: string;
  distributedfreckleSum: string;
  undistributedfreckleSum: string;
  verifiedfreckleSum: string;
  verifyProgress: string;
  batch: string;
}

const columns: TableColumnType<DataType>[] = [
  {
    title: '序号',
    dataIndex: 'key',
    width: 80,
    fixed: 'left',
  },
  {
    title: '省(直辖市)',
    dataIndex: 'province',
    width: 120,
  },
  {
    title: '市',
    dataIndex: 'city',
    width: 130,
  },
  {
    title: '区(县)',
    dataIndex: 'district',
    width: 130,
  },
  {
    title: '县级行政区代码',
    dataIndex: 'countylevecode',
    width: 130,
  },
  {
    title: '核查图斑总数',
    dataIndex: 'checkfreckleSum',
    width: 130,
  },
  {
    title: '已分发图斑总数',
    dataIndex: 'distributedfreckleSum',
    width: 130,
  },
  {
    title: '未分发图斑数',
    dataIndex: 'undistributedfreckleSum',
    width: 130,
  },
  {
    title: '已核查图斑数',
    dataIndex: 'verifiedfreckleSum',
    width: 130,
  },
  {
    title: '核查进度',
    dataIndex: 'verifyProgress',
    width: 130,
  },
  {
    title: '批次',
    dataIndex: 'batch',
    width: 130,
  },
  {
    title: '操作',
    key: 'operation',
    fixed: 'right',
    width: 100,
  },
];
const tabsList = ref<any>([]);
tabsList.value = tabsLists.data;
const rowSelection: TableProps['rowSelection'] = {
  onChange: (selectedRowKeys: any[], selectedRows: DataType[]) => {
    // console.log(
    //   `selectedRowKeys: ${selectedRowKeys}`,
    //   'selectedRows: ',
    //   selectedRows
    // );
  },
  getCheckboxProps: (record: DataType) => ({
    disabled: record.key === 'Disabled User', // Column configuration not to be checked
    key: record.key,
  }),
};
// 分页
const pageNumber = ref(1);
const pageSize = ref(10);
const total = ref(0);
onMounted(() => {
  handleList();
});
const handleList = () => {
  const index = (pageNumber.value - 1) * pageSize.value;
  const list = tabsLists.data.slice(index, index + pageSize.value);
  tabsList.value = list;
  total.value = tabsLists.data.length;
};

function onChange(page: number, size: number) {
  pageNumber.value = page;
  pageSize.value = size;
  handleList();
}
/*****详情1级*****/
const tbNum = ref('1101022');
const open = ref<boolean>(false);

const showDetail = () => {
  open.value = true;
};

const handleOk = (e: MouseEvent) => {
  // console.log(e);
  open.value = false;
};
//采集表类型
const collectionTableType = ref(undefined);
const collectionTableTypeList = ref<SelectProps['options']>([]);
collectionTableTypeList.value = workDetale1s.data.collectionTableTypeList;
const selCollectionTableTypeList = (value: string) => {
  // console.log(`selected ${value}`);
};
//是否涉及农村乱占耕地建房问题
const ruralillegaloccupation = ref(undefined);
const ruralillegaloccupationList = ref<SelectProps['options']>([]);
ruralillegaloccupationList.value = workDetale1s.data.ruralillegaloccupationList;
const selRuralillegaloccupation = (value: string) => {
  // console.log(`selected ${value}`);
};
//是否分发
const distribute = ref(undefined);
const distributeList = ref<SelectProps['options']>([]);
distributeList.value = workDetale1s.data.distributeList;
const seldistribute = (value: string) => {
  // console.log(`selected ${value}`);
};
//是否提交
const submit = ref(undefined);
const submitList = ref<SelectProps['options']>([]);
submitList.value = workDetale1s.data.submitList;
const selsubmit = (value: string) => {
  // console.log(`selected ${value}`);
};
//是否核查
const isCheckD1 = ref(undefined);
const isCheckD1List = ref<SelectProps['options']>([]);
isCheckD1List.value = workDetale1s.data.isCheckD1List;
const selisCheckD1 = (value: string) => {
  // console.log(`selected ${value}`);
};
//作业员
const workpeo = ref(undefined);
const workpeoList = ref<SelectProps['options']>([]);
workpeoList.value = workDetale1s.data.workpeoList;
const selworkpeo = (value: string) => {
  // console.log(`selected ${value}`);
};
//编号
const nums = ref('');
//查询-详情一级
function selxqFun() {}
//重置-详情一级
function resetxqFun() {
  collectionTableType.value = undefined;
  ruralillegaloccupation.value = undefined;
  distribute.value = undefined;
  submit.value = undefined;
  isCheckD1.value = undefined;
  workpeo.value = undefined;
  nums.value = '';
}
//表格-详情-级
interface DataType {
  key: string;
  provinces: string;
  city: string;
  district: string;
  countylevecode: string;
  checkfreckleSum: string;
  distributedfreckleSum: string;
  undistributedfreckleSum: string;
  verifiedfreckleSum: string;
  verifyProgress: string;
  batch: string;
}

const columnsDel: TableColumnType<DataType>[] = [
  {
    title: '序号',
    dataIndex: 'key',
    width: 80,
    fixed: 'left',
  },
  {
    title: '编号',
    dataIndex: 'provinces',
    width: 120,
  },
  {
    title: '乡镇',
    dataIndex: 'city',
    width: 130,
  },
  {
    title: '采集表类型',
    dataIndex: 'district',
    width: 130,
  },
  {
    title: '是否涉及农村乱占耕地建房问题',
    dataIndex: 'countylevecode',
    width: 130,
  },
  {
    title: '是否分发',
    dataIndex: 'checkfreckleSum',
    width: 130,
  },
  {
    title: '是否核查',
    dataIndex: 'distributedfreckleSum',
    width: 130,
  },
  {
    title: '作业员',
    dataIndex: 'undistributedfreckleSum',
    width: 130,
  },
  {
    title: '是否提交',
    dataIndex: 'verifiedfreckleSum',
    width: 130,
  },
  {
    title: '任务完成时间',
    dataIndex: 'verifyProgress',
    width: 130,
  },
  {
    title: '批次号',
    dataIndex: 'batch',
    width: 130,
  },
  {
    title: '操作',
    key: 'operation',
    fixed: 'right',
    width: 100,
  },
];
const tabsListD1 = workDetale1s.data.tableList;
/**详情二级 */
const opendel2 = ref<boolean>(false);

const showDetaildel = () => {
  opendel2.value = true;
};

const handledelOkdel = (e: MouseEvent) => {
  // console.log(e);
  opendel2.value = false;
};
//swiper

const dataSwiper = ref<any>([
  {
    name: 'https://copyright.bdstatic.com/vcg/creative/cc9c744cf9f7c864889c563cbdeddce6.jpg@h_1280',
  },
  {
    name: 'https://img0.baidu.com/it/u=1033018635,7901815&fm=253&fmt=auto&app=138&f=JPEG?w=750&h=500',
  },
  {
    name: 'https://img1.baidu.com/it/u=3353985195,2581327310&fm=253&fmt=auto&app=138&f=JPEG?w=750&h=500',
  },
  {
    name: 'https://img0.baidu.com/it/u=1033018635,7901815&fm=253&fmt=auto&app=138&f=JPEG?w=750&h=500',
  },
  {
    name: 'https://img1.baidu.com/it/u=3689823469,321459310&fm=253&fmt=auto&app=138&f=JPEG?w=750&h=500',
  },
]);
//详情三级-附件表格

interface DataType {
  key: string;
  fileName: string;
}

const columnsFile: TableColumnType<DataType>[] = [
  {
    title: '序号',
    dataIndex: 'key',
    width: 80,
    fixed: 'left',
  },
  {
    title: '附件名称',
    dataIndex: 'fileName',
  },
  {
    title: '操作',
    key: 'operation',
    fixed: 'right',
    width: 100,
  },
];
const tabsListFile = workDetale1s.data.tabsListFiles;
//右侧数据
const detaileObj = workDetale1s.data.detaileObj;
</script>
<style scoped lang="less">
.indexwp {
  width: 100%;
  min-height: 100vh;
  .header {
    display: flex;
    align-items: center;
    position: relative;
    .logo {
      color: #fff;
      font-weight: bold;
      font-size: 20px;
      margin-right: 20px;
      white-space: nowrap;
    }
    .loginOutBox {
      position: absolute;
      right: 15px;
      .userInfo {
        display: flex;
        align-items: center;
        height: 46px;
        .loginIcon {
          width: 36px;
          height: 36px;
          border-radius: 50%;
          margin-right: 10px;
        }
        .loginName {
          color: #fff;
        }
      }
    }
  }
  .topCom {
    width: 100%;
    min-height: 88px;
    display: flex;
    flex-wrap: wrap;
    background: #ffffff;
    border-radius: 5px;
    .itemsel {
      // margin-bottom:15px;
    }
    .labels {
      margin-left: 12px;
    }
    .selBtn {
      margin-left: 12px;
    }
    .resetBtn {
      margin-left: 12px;
    }
  }
  .bomTable {
    padding: 3px 0px;
    border-radius: 10px;
    background: rgb(255, 255, 255);
    width: 100%;
    min-height: 100vh-88px;
    overflow: auto;
    margin-top: 12px;
    .pagination-box {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: flex-end;
      padding-top: 8px;
      padding-right: 10px;
    }
  }
}
//详情二级
.imgswp {
  width: 100%;
  min-height: 100vh;
  display: flex;
  .leftImg {
    width: 50%;
    :deep(.slick-slide) {
      text-align: center;
      height: 160px;
      line-height: 160px;
      background: #364d79;
      overflow: hidden;
    }

    :deep(.slick-arrow.custom-slick-arrow) {
      width: 25px;
      height: 25px;
      font-size: 25px;
      color: #fff;

      transition: ease all 0.3s;
      opacity: 0.3;
      z-index: 1;
    }
    :deep(.slick-arrow.custom-slick-arrow:before) {
      display: none;
    }
    :deep(.slick-arrow.custom-slick-arrow:hover) {
      color: #fff;
      opacity: 0.5;
    }

    :deep(.slick-slide h3) {
      color: #fff;
    }
    .lbimgs {
      width: 400px;
      height: 400px;
      display: block;
    }
    .jzphoto {
      width: 100%;
      overflow: hidden;
    }
  }
  .rightImg {
    flex: 1;
    margin-left: 12px;
    height: 800px;
    overflow: auto;
    .itemWP {
      margin-bottom: 12px;
      span {
        width: 100px;
        display: inline-block;
        font-size: 14px;
        text-align: right;
        margin-right: 12px;
      }
    }
    .ncItemWp {
      display: flex;
    }
  }
}
</style>
